<template>
  <div class="page">
    <c-title text="数据"></c-title>
    <div class="wrapper">
      <div class="code-info flex">
        <div class="info-item">
          <h3>{{groupCodeData.log_today_count || '0'}}</h3>
          <p>今日扫码人数</p>
        </div>
        <div class="info-item">
          <h3>{{groupCodeData.log_new_today_count || '0'}}</h3>
          <p>今日新会员人数</p>
        </div>
        <div class="info-item">
          <h3>{{groupCodeData.code_soon_expire_count || '0'}}</h3>
          <p>即将过期二维码</p>
        </div>
        <div class="info-item">
          <h3>{{groupCodeData.cumulative || '0'}}</h3>
          <p>累计扫码人数</p>
        </div>
        <div class="info-item">
          <h3>{{groupCodeData.cumulative_new || '0'}}</h3>
          <p>累计新会员人数</p>
        </div>
        <div class="info-item">
          <h3>{{groupCodeData.code_expire_count || '0'}}</h3>
          <p>已过期二维码</p>
        </div>
      </div>
      <div class="list">
          <!--:border="false"-->
          <van-collapse v-model="activeName"
                        accordion
                        >
            <van-collapse-item title="标题1"
                               :name="key"
                               v-for="(item,key) in listData"
                               :key="key">
              <template #title>
                <div style="text-align: left;" class="title-day">{{item.date_day}}</div>
              </template>
              <div class="code-mian">
                <div class="lsit_content">
                  <p>当日扫码人数</p>
                  <p>{{item.total_count}}</p>
                </div>
                <div class="lsit_content">
                  <p>当日新增会员</p>
                  <p>{{item.new_count}}</p>
                </div>
              </div>
              
            </van-collapse-item>

          </van-collapse>
      </div>

    </div>

  </div>
</template>

<script>
import groupCodeDataController from './group_code_data_controller.js';

export default groupCodeDataController;
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
  .wrapper ::v-deep  .van-collapse-item__content {
    border-radius: 0 0 0.5rem 0.5rem;
  }
  .page {
    background-color: rgb(249, 249, 249);
    min-height: 100vh;
    padding-bottom: 3.0625rem;
  }

  .wrapper {
    .code-info {
      margin:0.625rem 0.75rem 0 0.75rem;
      border-radius: 0.5rem 0.5rem 0.5rem 0.5rem;
      background-color: #fff;
      flex-wrap: wrap;
      padding:0 0 1.125rem 0;
      .info-item {
        flex: 0 0 33%;
        padding:1.3125rem 0 0 0;
        h3 {
          font-size: 1rem;
          line-height: 1rem;
          padding:0 0 0.4375rem 0;
          font-weight: bold;
          color: #000000;
        }
      }
    }

    .list {
      overflow: hidden;
      margin:0.625rem 0.75rem 0 0.75rem;
      border-radius: 0.5rem 0.5rem 0.5rem 0.5rem;
      .title-day {
        font-size: 1rem;
        font-weight: 500;
        color: #00001C;
      }
    }
  }
  .code-mian {
    background: #F5F5F5;
    border-radius: 0.5rem 0.5rem 0.5rem 0.5rem;
    padding:0.9375rem 0.625rem;
  }

  .lsit_content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #6E6E79;
    font-size: 0.8125rem;
    &:last-child {
      padding:0.625rem 0 0 0;
    }
  }

</style>
